<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="include/accountsession.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Moviestore.com</title>

<link href="header.css" rel="stylesheet" type="text/css"></link>

<style type="text/css">


#navpaneleft{
	
	

	background: white;
	float:left;
	
	
	
}

#categorypane{
	padding:20px;
	border:15px solid #006666;
	width: 178px;
	line-height:30px;
	
	
	
}

#randommoviepane{
	padding:20px;
	border:15px solid #006666;
	width: 176px;
	line-height:30px;
	
	
	
}


#navpaneright{

	background: white;
	float:left;
	
	
}



#mainpane{
	
	
	
	background: white;
	width: 494px;
	float:left;
	
}


#gallerymain{
	border: 15px solid #333;
	
	width: 464px;
	height: 261px;
	
	
	
	
}

#gallerypicks{
	border:7px solid gray;

	width: 480px;
	height:85px;
	
}
	
	
img.gallery{
	width: 464px;
	height: 260px;
	
}

.gallerypicks{
	border:8px gray solid;
	
	
	height:70px;
	width:80px;
	float:left;
}

dt, .categorylist{
	border-bottom:1px solid #006666;
	color:white;
	font-family:verdana;
	
}
</style>

<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquerymenubar.js"></script>
<script type="text/javascript" src="ajaxmain.js"></script>


<script type="text/javascript">


    function indexcategorylistover(id){
	//$("#indexlist"+id+" ,dt").css("background-color","#66cccc");
        document.getElementById("indexlist"+id).style.backgroundColor = "#66cccc";
	$("a.categorylist").css("text-decoration","none");
    }
    function indexcategorylistout(id){
	//$("#indexlist"+id+" ,dt").css("background-color","#009999");
        document.getElementById("indexlist"+id).style.backgroundColor = "#009999";
	$("a.categorylist").css("text-decoration","none");
    }
   
	
	
	
	
	  

</script>



<script type="text/javascript">
var i=0;

// NOTE: CAN BE CHANGE
var galleries = new Array();
	galleries[0] = "<img class='gallery' alt='gal1' src='gal1.jpg'>";
	galleries[1] = "<img class='gallery' alt='gal2' src='gal2.jpg'>";
	galleries[2] = "<img class='gallery' alt='gal3' src='gal3.jpg'>";
	galleries[3] = "<img class='gallery' alt='gal4' src='gal4.jpg'>";
	galleries[4] = "<img class='gallery' alt='gal5' src='gal5.jpg'>";


function galleryrun(){
    document.getElementById("gallerymain").innerHTML = galleries[i];
	document.getElementById("gallery"+(i+1)).style.borderColor="red";
	
	if(document.getElementById("gallery1").style.borderColor=="red" && document.getElementById("gallery5").							style.borderColor=="red")
		document.getElementById("gallery5").style.borderColor="gray";
	
	try{
	document.getElementById("gallery"+(i)).style.borderColor="gray";
	}catch(exception){}
	
    i = (i==4) ? 0 : i+1;
	
	
	setTimeout("galleryrun()",5000);
	
	
}

</script>


</head>



<body onLoad=" retrieveRandomMovie();retrieveNewestMovie();retrieveHotMovie();retrieveUpcomingMovie();retrieveCategories();galleryrun();">
<!-- HEADER -->
<div id="header" >
    <%@include file="include/header.jsp" %>

</div>

<div class="menu">  
    
    <%@include file="include/menubar.jsp" %>
    
</div>



<!-- end of HEADER -->

<!-- ADVERTISEMENT -->
<div id="advertisement"><font color="gray">ADS HERE!</font>
</div>

<!-- end of ADVERTISEMENT -->

<!-- BODY -->

<div id="realbody">
	

	<div id="navpaneleft">

		<div id="categorypane" style="background-color:#009999;">
                    <font  color="white" style="font-weight:bold;" size="5px">All Categories</font>             
                    <div id="indexcategorylist">
                        <div id="indexcategoryloader"></div>
                    </div>
		</div>

		<div id="randommoviepane" style="background-color:#009999;width:178px;height:220px;">
			
		</div>



		TOP USERS
	
	</div>

	<div id="mainpane">

		<div id="gallery">
		  <div id="gallerymain">
	        </div>
			<div id="gallerypicks">
				<!--NOTE: CAN BE CHANGE -->
				<div id="gallery1" class="gallerypicks" onMouseOver="galleryselected1()" onMouseOut="galleryunselected()"><img src="gal1.jpg" width="80px" height="70px"/></div>
				<div id="gallery2" class="gallerypicks" onMouseOver="galleryselected2()" onMouseOut="galleryunselected()"><img src="gal2.jpg" width="80px" height="70px"/></div>
				<div id="gallery3" class="gallerypicks" onMouseOver="galleryselected3()" onMouseOut="galleryunselected()"><img src="gal3.jpg" width="80px" height="70px"/></div>
				<div id="gallery4" class="gallerypicks" onMouseOver="galleryselected4()" onMouseOut="galleryunselected()"><img src="gal4.jpg" width="80px" height="70px"/></div>
				<div id="gallery5" class="gallerypicks" onMouseOver="galleryselected5()" onMouseOut="galleryunselected()"><img src="gal5.jpg" width="80px" height="70px"/></div>
				
    	    </div>
        </div>

	  <div id="newestrelease" style="height:337px;background-color:#009999;padding:20px;">
              
		
            
 	  </div>
                
		<div id="quicksearch" style="height:337px;background-color:#009999;padding:20px;border-top:2px solid #006666;">
			<font size="5px" color="white">Quick Search</font>
        </div>

		
	</div>

	<div id="navpaneright">
    	<div id="upcominghotmovie" style="border:15px solid #006666;padding:20px;width:178px;background-color:#009999;">
			<div id="upcomingmovie" >
                            <font size="4px" color="white">Upcoming Movie in:</font><br>
                            <div id="indexupcomingmovie">
				<div id="indexupcomingmovieloader"></div>
                                    
                            </div>
                
              <a href="#"><font size="2px" color="white">See more!</font></a>
                
                
			
			</div>
            
            <hr color="#336666">
            <font size="5px" color="white">Hot Movie</font>
            <div id="hotmovie">
            	
            	
                
            
            </div>
            
            

		</div>
		
		<div id="top5movies" style="border:15px solid #006666;padding:20px;width:178px;height:800px;background-color:#009999; line-height:30px;">
        	<font size="5px" color="white" style="font-weight:bold;">Top 5 Movies</font>
            
            	<div id="hotmoviepic" style="line-height:0px;" >
	
    				<img style="width:174px;height:98px;border:2px solid #006666;" src="gal1.jpg"/>
 					<div id="hotmoviedesc" style="opacity:0.5;filter:alpha(opacity=50);width:177px;height:50px;background-color:#66cccc;line-height:normal;">NBA 2k12
                	</div>

				</div>	
        
        </div>
		
			
	</div>
</div>


<!-- end of BODY -->

<!-- FOOTER-->

<!-- end of FOOTER-->


</body>
</html>
